<template>
    <div class="asiadview" lang="aside">
        <el-menu class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
            <el-menu-item index="1" @click="cl1()">
                <i class="el-icon-thumb"></i>
                <span slot="title">自由点歌</span>
            </el-menu-item>
            <el-menu-item index="2" @click="cl2()">
                <i class="el-icon-position"></i>
                <span slot="title">随机点歌</span>
            </el-menu-item>
            <el-menu-item index="3" @click="cl3()">
                <i class="el-icon-video-play"></i>
                <span slot="title">播放列表</span>
            </el-menu-item>
            <el-menu-item index="4" @click="cl4()">
                <i class="el-icon-view"></i>
                <span slot="title">本地上传</span>
            </el-menu-item>
        </el-menu>
    </div>
</template>

<script>
import { data } from '@/play/data';
export default {

    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        cl1: function () {
            data.V1=true,
            data.V2=false,
            data.V3=false,
            data.V4=false,
            console.log(data)
        },
        cl2: function () {
            data.V1=false,
            data.V2=true,
            data.V3=false,
            data.V4=false,
            console.log(data)
        },
        cl3: function () {
            data.V1=false,
            data.V2=false,
            data.V3=true,
            data.V4=false,
            console.log(data)
        },
        cl4: function () {
            data.V1=false,
            data.V2=false,
            data.V3=false,
            data.V4=true,
            console.log(data)
        },
    }
}


</script>

<style>
div:lang(aside) {
    background-color: "#909399";
}

.asiadview ul {
    width: 100%;
    height: 100%;
}
</style>